@import url(./base.less);
@import url(./normalize.less);

@rootSize: 37.5rem;

body {
  background-color: #f9fbff;
}

.main {
  position: relative;
  height: (329 / @rootSize);
  background-image: url(../uploads/编组\ 12.png);
  background-size: 100%;
  .box {
    height: (20 / @rootSize);
    margin: 0 auto;
  }

  .box1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: (11.5 / @rootSize) (10 / @rootSize);
    height: (45 / @rootSize);

    .left {
      font-size: (30 / @rootSize);
      padding-left: (80 / @rootSize);
      color: #fff;
      font-family: 'Courier New', Courier, monospace;
    }

    .right {
      width: (79 / @rootSize);
      height: (7.1 / @rootSize);
      padding-bottom: (30 / @rootSize);
      background-color: #fff;
      border-radius: (100 / @rootSize);
    }
  }
  .ma {
    position: absolute;
    top: (80 / @rootSize);
    right: (30 / @rootSize);
    color: #fff;
    font-size: (12 / @rootSize);
    div:first-child {
      margin-left: (7 / @rootSize);
    }
  }
}

.denglu {
  position: relative;
  height: (252 / @rootSize);
  // background-color: pink;
  .chu {
    position: absolute;
    left: (10 / @rootSize);
    bottom: 0;
    width: (356 / @rootSize);
    height: (275 / @rootSize);
    background-color: #fff;
    border-radius: (10 / @rootSize) (10 / @rootSize) 0 0;

    .chu1 {
      display: flex;
      justify-content: space-between;
      width: (306 / @rootSize);
      height: (130 / @rootSize);
      border-bottom: 1px solid #ebebeb;
      margin: 0 (25 / @rootSize);

      .left a {
        display: inline-block;
        font-size: (18 / @rootSize);
        margin-top: (53 / @rootSize);
        margin-bottom: (3 / @rootSize);
        font-weight: 600;
      }
      .left img {
        display: inline-block;
        width: (8 / @rootSize);
        height: (14.4 / @rootSize);
        margin-left: (7 / @rootSize);
      }
      .left p {
        font-size: (14 / @rootSize);
      }
      .right img {
        margin-top: (40 / @rootSize);
        width: (67 / @rootSize);
        height: (67 / @rootSize);
        border-radius: 50%;
        margin-right: (6 / @rootSize);
      }
    }
    .chu2 {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: (356 / @rootSize);
      height: (144 / @rootSize);

      div {
        flex-direction: column;
        text-align: center;

        img {
          padding-left: (7 / @rootSize);
        }
        p:nth-child(2) {
          font-size: (20 / @rootSize);
          margin: (5 / @rootSize) 0;
        }
        p:nth-child(3) {
          font-size: (14 / @rootSize);
        }
      }
    }
  }
}

.lmor {
  height: (140 / @rootSize);
  // background-color: pink;

  .top {
    height: (49 / @rootSize);
    line-height: (49 / @rootSize);
    font-size: (18 / @rootSize);
    color: #353535;
    margin-left: (32 / @rootSize);
    font-weight: 600;
  }

  .bottom {
    display: flex;
    align-items: center;
    height: (91 / @rootSize);
    background-color: #fff;

    .bottom1 {
      width: (55 / @rootSize);
      height: (55 / @rootSize);
      border-radius: 50%;
      margin-left: (36 / @rootSize);
      margin-right: (22 / @rootSize);
    }
    .bottom2 {
      flex: 1;

      p:first-child {
        font-size: (14 / @rootSize);
        font-weight: 600;
        margin-bottom: (5 / @rootSize);
      }

      p:last-child {
        font-size: (10 / @rootSize);
      }
    }
    .bottom3 {
      width: (55 / @rootSize);
      height: (55 / @rootSize);
      border-radius: 50%;
      margin-right: 0;
    }
  }
}
.pro {
  height: (237 / @rootSize);
  margin-bottom: (10 / @rootSize);
  background-color: #fff;

  .top {
    display: flex;
    justify-content: space-between;
    height: (45 / @rootSize);
    padding: (30 / @rootSize) (26 / @rootSize) 0 (22 / @rootSize);

    .top1 {
      font-size: (18 / @rootSize);
      font-weight: 600;
      padding-right: (8 / @rootSize);
    }
    .top3 {
      // flex:1;
      display: inline;
      margin-right: (100 / @rootSize);
      width: (62 / @rootSize);
      height: (20 / @rootSize);
      background-color: #363636;
      border-radius: (6 / @rootSize) (6 / @rootSize) (6 / @rootSize) 0;
      font-size: (12 / @rootSize);
      color: #f0d393;
      text-align: center;
      line-height: (20 / @rootSize);
    }
    .top2 {
      font-size: (12 / @rootSize);
      img {
        display: inline-block;
        width: (5 / @rootSize);
        height: (9 / @rootSize);
      }
      a {
        color: #535353;
      }
    }
  }

  .bottom {
    height: (192 / @rootSize);
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    justify-content: space-evenly;
    div:hover {
      background-color: #363636;
      color: #f0d393;
    }
    div {
      position: relative;
      width: (104 / @rootSize);
      height: (55 / @rootSize);
      border: (1 / @rootSize) solid #4b4b4b;
      border-radius: (8 / @rootSize);
      color: #353535;
      font-size: (14 / @rootSize);
      text-align: center;
      line-height: (55 / @rootSize);
      p {
        // margin: 0 auto;
        color: #353535;
        line-height:(16 / @rootSize) ;
        position: absolute;
        right: (-1 / @rootSize);
        bottom: (-1 / @rootSize);
        border: 1px solid #4b4b4b;
        border-radius: (3 / @rootSize) (3 / @rootSize) (8 / @rootSize) 0;
        font-size: (9 / @rootSize);
        width: (15 / @rootSize);
        height: (16 / @rootSize);
        background-color: #f0d393;
      }
    }
  }
}
.footer1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 (32 / @rootSize);
  height: (55 / @rootSize);
  background-color: #fff;
  margin-bottom: (11 / @rootSize);

  .left {
    a {
      font-size: (18 / @rootSize);
      color: #353535;
    }
    img {
      display: inline-block;
      width: (7 / @rootSize);
      height: (13 / @rootSize);
    }
  }
}
.footer2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 (32 / @rootSize);
  height: (55 / @rootSize);
  background-color: #fff;

  .left {
    a {
      font-size: (18 / @rootSize);
      color: #353535;
    }
    img {
      display: inline-block;
      width: (7 / @rootSize);
      height: (13 / @rootSize);
    }
  }
}
.footer3 {
  height: (55 / @rootSize);
  line-height: (55 / @rootSize);
  text-align: center;
  img {
    display: inline-block;
  }
}
